<template>
    <div>
        <div class="history">
            <p>搜索历史</p>
            <van-empty description="无历史记录" v-if="historylist.length==0" style="height: 100px;"/>
            <div v-else>
                <ul class="his1">
                    <li v-for="(item,index) in historylist" :key="index">{{item}}<van-icon name="cross" style="float: right; margin-top: 7px;" @click="removehis(item)"/></li>
                </ul>
            </div>
        </div>
        <van-tabs v-model="active">
            <van-tab title="热点榜">
                <ul class="hot">
                    <li v-for="(item,index) in hotList" :key="index" @click="detail(item.articleId)"><span
                            style="display: inline-block; width: 20px; text-align: center; color: orange;">{{index+1}}</span>：{{item.title}}
                    </li>
                </ul>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import {hotNewsList} from "../api/api";

    export default {
        name: "searchBody",
        data() {
            return {
                active: 0,
                historylist: [],
                hotList: []
            }
        },
        methods:{
            removehis(item){
                this.historylist.splice(this.historylist.indexOf(item),1);
                localStorage.setItem("his",JSON.stringify(this.historylist));
            },
            detail(id){
                this.$router.push("/RotateDeatil?articleId="+id);
            }
        },
        created() {
            this.historylist = JSON.parse(localStorage.getItem("his")) || [];
            hotNewsList(1, 10).then(res => {
                this.hotList = res.rows;
                // console.log(this.hotList);
                this.looo = false
            })
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .van-empty__image {
        width: 100px;
        height: 100px;
    }
    /deep/ .van-tabs__wrap {
        width: 100px;
    }

    /deep/ .van-tab--active {
        font-weight: bold;
    }

    .hot {
        padding: 10px;

        li {
            margin: 5px;
            padding: 5px 0;
            border-bottom: 1px solid #eaeaea;
            width: 90%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    }
    .history{
        padding: 10px;
        min-height: 150px;
        p{
            color: #999999;
        }
    }
    .his1{
        display: flex;
        /*justify-content: space-around;*/
        align-items: center;
        flex-wrap: wrap;
        li {
            width: 25%;
            padding: 0 5px;
            display: inline-block;
            margin: 5px 10px;
            height: 30px;
            background-color: #eaeaea;
            text-align: center;
            line-height: 30px;
            border-radius: 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
</style>